<template>
    <div>

    </div>
</template>

<script setup>
//按需引入所需方法
import { watchEffect, watch, computed, defineProps, reactive, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured } from 'vue'

defineProps({ //3 非ts专有声明
    msg: String,
    num: {
        type: Number,
        default: ''
    }
})

//声明对象数据类型响应
const data = reactive({
    name: 'test',
    age: 18,
    run: {
        m: '10s'
    }
})
//声明一般基本数据类型响应
const num = ref('9')
let count = ref('song')

//计算属性简写
const age = computed(() => {
    return 1 + 1;
})
//计算属性完整
const fullName = computed({
    get() {
        return 1 + 1;
    },
    set(value) {
        a = value;
    }
})


//情况一：监视ref所定义的一个响应式数据，第三个参数是配置项
watch(num, (newValue, oldValue) => {
    console.log("num改变了")
}, { immediate: true })

// //情况二：监视ref所定义的多个响应式数据
watch([sum, count], (newVal, oldVal) => {
    console.log("sum或者count改变了", newVal, oldVal)
}, { immediate: true })

//情况三：监视reactive所定义的一个响应式数据
//1.注意：次数无法正确的获取oldValue
//2.注意：强制开启了深度监视（depp配置无效）
watch(data, () => {
    console.log("data改变了")
}, { immediate: true })

//情况四：Jin啊哈斯reactive所定义的一个响应式数据中的某个属性
watch(() => data.name, () => {
    console.log("data.name改变了")
}, { immediate: true })

//情况五：监视reactive所定义的一个响应式数据中的某些属性
watch([() => data.age, () => data.name], () => {
    console.log("data.age或者data.name改变了")
}, { immediate: true })

//特殊情况,如果监视的属性是对象，需要开启深度监视
watch(() => data.m, () => {
    console.log("data.md对象改变了")
}, { immediate: true, deep: true })

//watchEffect的套路是：不用指明监视哪个属性，监视的回调函数中用到哪个属性，就监视哪个属性
//watchEffact所指定的回调中用到的数据只要发生变化，则直接重新执行回调
watchEffect(() => {
    const x1 = num
    const x2 = data
    console.log('watchEffer配置的回调执行了')
})

console.log('setup', 'setup ===> 相当于 vue2.x 中 beforeCreated, created');

// 组件挂载之前执行
onBeforeMount(() => {
    console.log('onBeforeMount ===> 相当于 vue2.x 中 beforeMount');
})
// 组件挂载之后执行
onMounted(() => {
    console.log('onMounted ===> 相当于 vue2.x 中 mounted');
})
// 组件更新之前执行
onBeforeUpdate(() => {
    console.log("onBeforeUpdate ===> 相当于 vue2.x 中 beforeUpdate")
})
// 组件更新之后执行
onUpdated(() => {
    console.log("Counter ===> 相当于 vue2.x 中 updated")
})
//组件销毁之前执行
onBeforeUnmount(() => {
    console.log("Counter ===> 相当于 vue2.x 中 beforeDestroy")
})
//组件销毁之后执行 
onUnmounted(() => {
    console.log("Counter ===> 相当于 vue2.x 中 destroyed")
})
//errorCaptured 本质上是捕获一个来自子孙组件的错误，它返回 true 就可以阻止错误继续向上传播
onErrorCaptured(() => {
    console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
})
</script>

<style lang="scss" scoped>

</style>